<template>
    <div class="wrapper hover-style">
      <div class="detail" v-show="showDetail" :style="isLeft ? 'left:0' : 'right:0; text-align:right;'">
        <span>{{name}}</span>
        <span :class="color">{{subtotal}}</span>
      </div>
      <div class="chart-item" @mouseenter="click($event)">
        <div class="bar" ref="bar">
        </div>
        <div class="progress-bar" :class="color" ref="progressbar">
        </div>
        <div class="triangle" v-show="showDetail">
        </div>
      </div>
    </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 100
    },
    subtotal: {
      type: Number,
      default: 10
    },
    name: {
      type: String,
      default: '个人充值'
    },
    showDetail: {
      type: Boolean,
      default: false 
    },
    color: {
      type: String,
      default: 'red'
    }
  },
  data() {
    return {
      isLeft : true
    }
  },
  mounted() {
    this.setOffSet()
  },
  methods: {
    setOffSet() {
      let bar = this.$refs.bar 
      let progressbar = this.$refs.progressbar
      progressbar.style.height = this.subtotal / this.total * 100 + '%'
    },
    click(event) {
      let mouseX = event.clientX;
      // if(event.clientX*2 > document.body.clientWidth){
      //   mouseX = event.clientX - document.body.clientWidth/2;
      // }
      mouseX*1.5 > (this.$parent.$refs.charts.clientWidth) ? this.isLeft = false : this.isLeft = true;
      console.log(this.$parent.$refs);
      
    }
  },
  
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .wrapper 
    position relative 
    height 100%
    .detail 
      position absolute 
      min-width 200px
      // left 0
      top -30px
      .red 
        color $color-theme-red  
      .green 
        color $color-primary-green
    .chart-item 
      position relative 
      width 20px 
      height inherit
      .bar 
        width 1px 
        height 100% 
        background $color-sub-grey 
        position absolute 
        left 50%
        transform translateX(-50%)
      .progress-bar 
        width 3px 
        position absolute 
        left 50%
        height 80%
        transform translateX(-50%)
        bottom 0
        &.red 
          background $color-theme-red 
        &.green 
          background $color-primary-green
      .triangle 
        position absolute 
        width 0
        height 0
        border 4px dashed #000 
        border-color #000 transparent transparent transparent 
        left 50%
        transform translateX(-50%)
        top -7px
    // :hover + .detail
</style>